<template>
  <div class="layout-col bs flex1">
    <div class="ww100 flex-bc plr12 ptb8 bs2">
      <div class="flex-sc">
        <div class="h30"><img class="hh100" src="@/assets/images/tibi-ico.png" /></div>
        <span class="f15 fw ml8">{{publicStore.status == 1? '历史' : '最新'}}告警</span>
      </div>
      <div class="flex-ec i21 cursor"></div>
    </div>
    <div class="row bgi22">
      <div :style="{textAlign: v.align}" v-for="(v, i) in state.content" :key="i" v-show="v.show" :class="typeof(v.key) == 'object'?v.width +' '+ 'mlr5':v.width">{{v.name}}</div>
    </div>
    <div class="table">
      <div class="row" :class="state.actIndex==index? 'active' : index%2 == 1?'bgi23':'bgi18'" v-for="(item, index) in publicStore._public.alarmList" :key="index" @click.stop="handleClick('active', item, index)">
        <div v-show="v.show" :class="v.width" :style="{textAlign: v.align}" v-for="(v, i) in state.content" :key="i">
          <span class="i21 cursor mlr5" v-if="typeof(v.key) == 'object'" v-for="(vv, kk, ii) in v.key" :key="ii" @click.stop="handleClick(kk, item)">{{vv}}</span>
          <span v-else-if="v.key=='*'">{{index+1}}</span>
          <span v-else-if="v.type == 'time'">{{item[v.key] == 0?'/':parseTime(item[v.key])}}</span>
          <span v-else-if="v.key == 'clear_type'" :class="item[v.key] == 0?'i21':item[v.key] == 1?'i8':item[v.key] == 1?'i6':''">
            {{item[v.key] == 0?'未处理':item[v.key] == 1?'已处理':item[v.key] == 1?'自动消除':''}}
          </span>
          <span v-else>{{isNull(item[v.key]) && v.key!=''? '/' : item[v.key]}}</span>
        </div>
      </div>
      <div v-if="isNull(publicStore._public.alarmList)" class="flex-cc ww100 hh100 tc ptb13">没有数据</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const router = useRouter();
const route = useRoute();
const { proxy }: any = getCurrentInstance();
const publicStore = proxy.publicStore();
const configStore = proxy.configStore();
const state = reactive({
  ...publicStore.$state,
  content: [
    // { width: 'w70',   show: true, align: 'center', key: '*', name: '序号' },
    { width: 'w50x1', show: route.path == '/home'? true : false, align: 'start', key: 'sensor_stationNum', name: '编号' },
    { width: 'w50x4', show: route.path == '/chart'? false : true, align: 'start', key: 'sensor_name', name: '名称' }, 
    { width: 'w50x6', show: route.path == '/chart'? false : true, align: 'start', key: 'sensor_instlPos',  name: '安装位置' },
    { width: 'w50x4', show: true, align: 'start', key: 'alarm_time', name: '告警时间', type: 'time' },
    { width: 'w50x2', show: true, align: 'start', key: 'alarm_description', name: '告警原因' },
    { width: 'flex1', show: true, align: 'start', key: 'clear_type', name: '状态' },
    { width: 'w50x2', show: route.path == '/monitor' || route.path == '/chart'? false : true, align: 'start',  key: 'clear_description', name: '处理方案' },
    { width: 'w50x4', show: route.path == '/monitor' || route.path == '/chart'? false : true, align: 'start',  key: 'clear_time', name: '处理时间', type: 'time' },
    { width: 'w50x2', show: route.path == '/monitor' || route.path == '/chart'? false : true, align: 'start',  key: 'clear_by_name', name: '处理人员' },
    { width: 'flex1', show: true, align: 'right', key: {view: '查看'},  name: '操作' },
  ]
})

const handleClick = async(remark, val) => {
  if(remark == 'view'){
    let query = {id: val.sensor_id, name: val.sensor_name, type: val.sensor_type, instlPos: val.sensor_instlPos, alarm_time: val.alarm_time}
    if(route.path == '/chart'){
      router.replace({ path: '/chart', query: query })
      setTimeout(() => { location.reload() }, 10)
    }if(route.path == '/home'){
      configStore.distributId = val.sensor_stationNum
      setTimeout(() => { proxy.toPath('/chart', query) }, 10)
    }else{
      proxy.toPath('/chart', query)
    }
  }
}

</script>

<style scoped lang="scss">

</style>
